<template>
  <el-dialog
    v-if="dialogVisible"
    width="40%"
    title="同步数据"
    :lock-scroll="false"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    @close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="74px">
      <el-form-item label="同步地址:">
        <el-input v-model="form.syncUrl" placeholder="请输入同步地址" />
      </el-form-item>
    </el-form>
    <el-card shadow="never">
      <div v-for="item in data" :key="item.module.value">
        <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" :label="item.module.value" @change="(val) => handleCheckAllChange(val, item)">{{ item.module.name }}</el-checkbox>
        <div style="margin: 5px 0;" />
        <el-checkbox-group v-model="item.checkedTriggerList" @change="(val) => handleCheckedTriggerChange(val, item)">
          <el-checkbox v-for="trigger in item.triggerList" :key="`${trigger.value}`" :label="`${trigger.value}`">{{ trigger.name }}</el-checkbox>
        </el-checkbox-group>
        <div style="margin: 20px 0;" />
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getInfo, save } from '@/api/client/clientSync'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      form: {
        clientId: this.id,
        syncUrl: ''
      },
      data: [],
      rules: {
        syncUrl: [{ required: true, message: '请输入URL', trigger: ['change', 'blur'] }]
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getInfo(this.id).then(res => {
        this.form.syncUrl = res.data.syncUrl
        this.data = res.data.data
        this.data.forEach(item => {
          this.$set(item, 'checkAll', false)
          this.$set(item, 'isIndeterminate', false)
        })
        this.data.forEach(item => {
          if (item.checkedTriggerList) {
            this.handleCheckedTriggerChange(item.checkedTriggerList, item)
          } else {
            this.$set(item, 'checkedTriggerList', [])
          }
        })
      })
    },
    handleSubmit() {
      this.form.data = this.data
      save(this.form).then(res => {
        this.$message.success('保存成功')
        this.handleClose()
      })
    },
    handleCheckAllChange(val, item) {
      item.checkedTriggerList = val ? item.triggerList.map(trigger => trigger.value) : []
      item.isIndeterminate = false
    },
    handleCheckedTriggerChange(val, item) {
      const triggerLength = item.triggerList.map(trigger => trigger.value).length
      const checkedCount = val.length
      item.checkAll = checkedCount === triggerLength
      item.isIndeterminate = checkedCount > 0 && checkedCount < triggerLength
    },
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
